<html> 
	<head> 
		<style>
			img{max-width:100px;max-height:100px;margin: 0 0;}  
			/*定义显示的格式*/
			p{
				color:  black;
				font-family: "Arial", "san-serif";
				font-size: 14px;
				display: inline;
			}
			/*自己的消息*/
			.myMsg
			{
				max-height: 300px;
				max-width:  300px;
				position: relative;
				float: right;
			}
			/*显示自己的头像*/
			.divMyHead
			{
				position: relative;
				float: right;
				margin:5px 0px 5px 0px;
				right: 1px;
				border-radius: 5px;
            }
			/*对方的消息*/
			.otherMsg{
				max-height: 300px;
				max-width:  300px;
				position: relative;
				float: right;
			}
			/*显示对方的头像*/
			.divotherHead{
				position: relative;
				float: left;
				margin:5px 0px 0px 0px;
				left: 1px;
				border-radius: 5px;
			}
			/*实现对方发送来的消息的方框*/
			.triangle-left{
				float:left;
				max-width:380px;
				border:1px solid #ffffff;
				border-radius:5px;
				padding:4px;
				background:#ffffff;
				position:relative;
				display:inline-block;
				margin:5px 0px 5px 20px;
				word-wrap: break-word;
			}

			.triangle-left:before{
				position:absolute;
				content:"";
				display:block;
			}
			/*实现对方消息的那个小三角，小三角的实现其实是将一个正方形对角线划分为四个小三角，其余的三个设置颜色不可见，只将对自己有用的那一个留下来*/
			.triangle-left.left:before{
				border-color:rgba(0, 0, 0, 0) #ffffff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
				border-width:5px 5px 5px 0;
				border-style:solid;
				bottom:auto;
				left:-5px;
				top:8px;
			}
			.triangle-left.left:after{
				border-color:rgba(0, 0, 0, 0) #ffffff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
				border-width:5px 5px 5px 0;
				border-style:solid;
				bottom:auto;
				left:-5px;
				top:8px;
			}
			/*实现右边的气泡*/
			.triangle-right{
				float:right;
				max-width:380px;
				border:1px solid #bedfff;
				border-radius:5px;
				padding:5px;                        
				background:#bedfff;
				position:relative;
				display:inline-block;
				margin:5px 20px 5px 0;
				word-wrap: break-word;
			}
			.triangle-right:before{
				position:absolute;
				content:"";
				display:block;
			}
			.triangle-right.right:before{
				border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #bedfff;
				border-width:5px 0px 5px 5px;
				border-style:solid;
				bottom:auto;
				right:-6px;
				top:8px;
			}
			.triangle-right:after{
				position:absolute;
				content:"";
				display:block;
			}
			.triangle-right.right:after{
				border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #bedfff;
				border-width:5px 0px 5px 5px;
				border-style:solid;
				bottom:auto;
				right:-6px;
				top:8px;
			}
        </style> 
		<script language="JavaScript" >
        function addMsg(msg)
        {
			alert(msg);
        }
        function addFile()
        {
                var str = '<INPUT type="file" size="20" NAME="File">'
                document.getElementById("MyFile").insertAdjacentHTML("beforeEnd", str)
            alert("hello word!")
        }
        function getAll()
		{
            content = document.body.innerHTML           
        }
        /*将发送或接收的图片显示在气泡里面*/
        function append()
		{
            var obj = document.getElementById("content");

            obj.insertAdjacentHTML("beforeEnd","<div style='overflow:hidden;'><p class='divMyHead' width='30px' height='30px'></p><p class='triangle-right right'>nice</p></div>");
        }
        function choosephoto()
		{         
            var obj = document.getElementById("content");
			alert("hello wordwwww!");
            obj.insertAdjacentHTML("afterEnd","<div style='overflow:hidden;'><p class='divMyHead' width='30px' height='30px'></p><p class='triangle-right right'>nice</p></div>");

        }
        function clear(){
            document.body.innerHTML=''
}
        </script> 
	</head> 
	
	<body id ="content" style=" font-family:'SimSun'; font-size:9pt; font-weight:400; font-style:normal;">\n


		<div style='overflow:hidden;'>
			<p class='divMyHead'>
				<img src="illust_44873217_20180818_191943.jpg" width='30px' height='30px'/> 
			</p>

			<p class='triangle-right right' style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">撒大声撒大声地地是多少
				<span style=" font-family:'微软雅黑'; font-size:15pt; font-weight:320; font-style:italic; color:#ff2bd8;">大叔大婶</span>
				<img src="illust_44873217_20180818_191943.jpg" />
			</p>
		</div>
	</body>

</html>